<template>
	<view class="wrap">
		<view class="u-tabs-box">
			<u-tabs-swiper
				ref="tabs"
				activeColor="#1296db"
				swiperWidth="750"
				:list="tabList"
				:current="currentTab"
				:is-scroll="false"
				@change="tabsChange"
			/>
		</view>
		<swiper
			class="swiper-box"
			:current="currentSwiper"
			@transition="transition"
			@animationfinish="animationfinish">
			<swiper-item v-for="(apply, applyIndex) in applyList" :key="applyIndex" class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(applyIndex)">
					<uni-list>
						<uni-list-item
							v-for="(item, index) in apply"
							:key="index"
							showArrow
							clickable
							@click="showDetail(item)"
							>
							<template v-slot:header>
								<u-jk-avatar v-if="item.userInfo[0].avatar" :src="item.userInfo[0].avatar" size="80" mode="square" class="header-image"></u-jk-avatar>
								<u-jk-avatar v-else :text="item.empName" size="80" mode="square" class="header-image" bg-color='#36daeb'></u-jk-avatar>
							</template>
							<template v-slot:body>
								<view style="width: 59%;">
									<view class="item-title">
										<view>{{item.empName}}</view>
										<view style="margin-left: 20rpx;">时长：{{item.workDays}}天</view>
									</view>
									<view class="item-content">{{item.reason}}</view>
								</view>
							</template>
							<template v-slot:footer>
								<view style="margin-left: auto;">
									<view class="item-title" style="font-size: 28rpx;">{{item.workTimeStart}}</view>
									<view style="text-align: center;">{{item.status | statusFilter}}</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
					<view class="footer-warpper" @click="toAudditList">
						等待审批共<text style="color: red;">{{applyCount}}</text>条
						<uni-icons style="float: right;" type="arrowright" color="#BBBBBB"></uni-icons>
					</view>
					<u-loadmore :status="loadStatus[applyIndex]" bgColor="#f2f2f2" margin-top='50' margin-bottom='50'></u-loadmore>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="holiday-btn" type="default" @click="addHoliday">提交申请</view>
		<u-tabbar :list="vuex_tabbar"  :icon-size="vuex_tabbar_icon_size" :active-color="vuex_tabbar_active_color"></u-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			uid: '',								// 当前登录用户的id
			tabList: [{								// tab页列表
				name: '加班申请'
			}, {
				name: '调休申请'
			}],
			currentTab: 0,							// tabs组件的current值，表示当前活动的tab选项
			currentSwiper: 0,						// swiper组件的current值，表示当前那个swiper-item是活动的
			applyList: [[], []],					// 加班/调休申请记录，第0位放加班记录，第1位放调休记录
			loadStatus: ['loadmore', 'loadmore'],	// 加载状态
			currentPage:[1, 1],						// 当前页数
			pageSize:[20, 20],						// 每页数量
			hasMore:[false, false],					// 是否有更多数据
			applyCount: 0							// 需要审核加班/调休申请数量
		};
	},
	filters: {
		// 审核状态转文字
		statusFilter(status) {
			switch(status) {
				case '0':
					return '待审核';
				case '1':
					return '已审核';
				case '2':
					return '已失效';
				default:
					return '待审核';
			}
		}
	},
	onLoad() {
		this.uid = uni.getStorageSync('uid');
	},
	onShow() {
		this.currentPage = [ 1, 1 ];
		this.getApplyList(0);
		this.getApplyList(1);
		this.getWorkApplyCount();
	},
	onPullDownRefresh() {
		this.getApplyList(0);
		this.getApplyList(1);
		this.getWorkApplyCount();
	},
	computed: {

	},
	methods: {
		/**
		 * 获取加班/调休申请列表
		 * @param {number} type 0:加班 ，1:调休
		 */ 
		getApplyList(type) {
			let that = this;
			this.$set(this.loadStatus, type, 'loading');
			
			uni.showLoading({
				mask: true
			})
			
			this.request('business/work/getApplyList', {
				page: this.currentPage[type],
				size: this.pageSize[type],
				type: type === 0 ? '1' : '0'
			}).then(res => {
				if(res.code === 0) {
					that.hasMore[type] = res.hasMore;
					if(res.hasMore === false) {
						that.$set(that.loadStatus, type, 'nomore');
					} else {
						that.$set(that.loadStatus, type, 'loadmore');
					}
					
					if(that.currentPage[type] === 1) {
						that.$set(that.applyList, type, res.data)
					} else {
						let updateCount = (that.currentPage[type] - 1) * that.pageSize[type];
						that.applyList[type].splice(updateCount, res.data.length, ...res.data);
					}
				} else {
					uni.showModal({
						showCancel: false,
						content: res.msg
					})
				}
			}).catch(err => {
				uni.showModal({
					showCancel: false,
					content: err.message || '请求服务失败'
				})
			}).finally(() => {
				uni.hideLoading();
			})
		},
		
		// 获取需要审核加班/调休申请数量
		getWorkApplyCount() {
			let that = this;
			this.request('business/work/getWorkApplyCount', {type: this.currentSwiper === 0 ? '1' : '0'}).then(res => {
				if(res.code === 0) {
					that.applyCount = res.total;
				}
			})
		},
		
		// tabs通知swiper切换
		tabsChange(index) {
			this.currentSwiper = index;
		},
		
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish({ detail: { current } }) {
			this.getApplyList(current);
			this.$refs.tabs.setFinishCurrent(current);
			this.currentSwiper = current;
			this.currentTab = current;
			this.getWorkApplyCount();
		},
		
		// 上拉加载
		reachBottom(type) {
			if(this.hasMore[type]){
				this.currentPage[type]++;
				this.getApplyList(type);
				this.getWorkApplyCount();
			}
		},
		
		// 查看详情
		showDetail(item) {
			uni.navigateTo({
				url: './detail?ifAuditor=false&applyInfo=' + JSON.stringify(item)
			})
		},
		
		// 提交申请
		addHoliday() {
			uni.navigateTo({
				url: './add'
			})
		},
		
		// 前往需要审核的申请列表
		toAudditList() {
			let url = './list?type=' + (this.currentSwiper === 0 ? '1' : '0');
			uni.navigateTo({
				url: url
			})
		}
	}
};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}
	/* #endif */
</style>

<style lang="scss" scoped>
	/* #ifdef H5 */
	.row{
		display: block;
	}
	/* #endif */

	.row{
		/deep/ .u-td{
			flex-direction: row;
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}
	
	.header-image {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10px;
		overflow: hidden;
	}

	.item-title {
		display: flex;
		font-size: 30rpx;
		color: #757070;
		line-height: 1.5;
	}

	.item-content {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.holiday-btn {
		height: 120rpx;
		width: 120rpx;
		position: fixed;
		right: 20rpx;
		bottom: calc(var(--window-bottom) + 160rpx) ;
		background-color: #fff;
		z-index: 1000000;
		padding: 20rpx;
		padding-left: 26rpx;
		font-size: 15px;
		border-radius: 50%;
		border:1px solid #c1c1c1;
		line-height: inherit;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	}

	.footer-warpper {
		margin-top: 40rpx;
		font-size: 36rpx;
		padding: 22rpx 10px 22rpx 30rpx;
		background-color: #FFFFFF;
	}
</style>
